<template>
    <div>
        <van-sticky>
            <van-nav-bar title='订单确认' left-arrow>
                <template #left>
                    <van-icon name="arrow-left" size="20" @click="$router.back()" style="margin-right:10px" />
                </template>
            </van-nav-bar>
        </van-sticky>
        <van-cell is-link size="large" center>
            <template #title>
                <van-icon name="location" size="20" color='rgb(0,170,166)' />
                <span class="custom-title" @click='goto("/addressedit")' ref='adr'>请输入地址</span>
            </template>
        </van-cell>
        <van-card v-for="(item,index) in selectShop"  :num="item.qty" :price="item.price/100" :title="item.name"
            :thumb="item.mainImage" :key='index' />
        <van-cell size="large" center :value='"￥"+totalPrice/100'>
            <template #title>
                <span class="custom-title">商品总价</span>
            </template>
        </van-cell>
        <van-cell size="large" center value='包邮'>
            <template #title>
                <span class="custom-title">运费</span>
            </template>
        </van-cell>
        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
            <template #tip>

                <span v-show='tip'>
                    <van-icon name='info-o'></van-icon>
                    请输入收货地址
                </span>
            </template>
        </van-submit-bar>
    </div>
</template>
<script>
    export default {
        name: 'Order',
        data() {
            let selectShop = JSON.parse(localStorage.getItem('selectShop')) || [];
            let cartlist = JSON.parse(localStorage.getItem("cartlist")) || [];
            let address = JSON.parse(localStorage.getItem('address', address)) || '';

            return {
                selectShop,
                cartlist,
                address,
                userAddress: '',
                tip: true
            }
        },
        created() {
            this.$parent.showTabbar = false;

        },

        destroyed() {
            this.$parent.showTabbar = true;
            localStorage.removeItem('address');
        },
        mounted() {
            let address = JSON.parse(localStorage.getItem('address', address)) || '';
            console.log('address', address);

            if (address) {
                this.$refs.adr.innerHTML = address.name + " " + address.tel + " " + address.province + " " + address.city + " " + address.county + " " + address.addressDetail + " " + address.postalCode;

            }
            if (this.$refs.adr.innerHTML != '请输入地址') {
                this.tip = false;
            }
            console.log(this.$refs.adr.innerHTML);

        },

        computed: {
           
            totalPrice() {
                return (
                    this.selectShop.reduce((val, item) => {
                        // val: 每一次遍历的返回值
                        return val + item.price * item.qty;
                    }, 0)
                );

            },

        },
        methods: {
            onSubmit() {
                let address = JSON.parse(localStorage.getItem('address', address)) || '';
                this.cartlist = this.selectShop.filter(item => {
                    return this.selectShop.includes(item.id);
                });
                // localStorage.setItem('cartlist', JSON.stringify(this.cartlist));
                // 更新本地存储数据

                // this.$router.push('/cart');
                console.log(this.cartlist);
                console.log("selectShop", this.selectShop);
                if (!this.tip) {
                    console.log('111', this.address);
                    this.$request.post('order/addorder', {
                        data: this.selectShop,
                        address: this.address
                    })
                    this.$router.push('/mine');
                    this.$toast('下单成功~')
                } else {
                    this.$toast('请先填写收货地址哦~')
                }


            },
            goto(url) {
                this.$router.push(url);
            }
        }
    }
</script>
<style>
    .custom-title {
        font-size: 14px !important;
        color: #ccc !important;
        padding-left: 20px;
    }
</style>